<template>
	<view class="container">
		<view class="yb1">
			<text class="name">
				{{currentValue.childrenName}} 宝宝
			</text>
			<text class="age">
				{{currentValue.childrenMonth}}个月
			</text>
			<view class="desc">
				喜欢玩
			</view>
		</view>
		<u-image class="yb2" width="174" height="46" src="https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/wximg/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240625161031.png"></u-image>
		
		<view class="yb4">
			<u-image
				v-if="currentValue.childrenImage"
				shape="circle"
				width="447" 
				height="447"
				:src="currentValue.childrenImage"></u-image>
			<view v-else class="upload-hint">
				<text>请上传图片</text>
				<text>点击左下角“编辑”</text>
			</view>
			<u-image class="yb3" width="293" height="327" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_one_4.png"></u-image>
		</view>
		
		<cover-view v-if="type === 'create'" class="edit" @click="editClick">
			<cover-view>编辑</cover-view>
		</cover-view>
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<scroll-view scroll-y="true" style="max-height: 800rpx;">
					<u-form :model="form" ref="uForm">
						<u-form-item label="姓名"><u-input v-model="form.childrenName"/></u-form-item>
						<u-form-item label="月份"><u-input v-model="form.childrenMonth"/></u-form-item>
						<u-form-item label="照片" :border-bottom="false">
							<x-upload
								ref="uUpload"
								:form-data="formData"
								@onUploaded="onUploaded"
								:hasVideo="false"
								:maxCount="1"
							/>
						</u-form-item>
					</u-form>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="actionClick">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import XUpload from '@/components/x-upload'
	export default {
		components: {
			XUpload
		},
		props: {
			type: {
				type: String,
				default () {
					return 'create'
				}
			},
			value: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			currentValue: {
			  get () {
				return this.value
			  },
			  set (val) {
				  console.log(val)
				  this.$emit('input', val)
			  }
			},
		},
		data() {
			return {
				show: false,
				form: {},
				
				formData: {
					'bizType': 'monthly'
				},
			}
		},
		created() {
			this.form = { ...this.currentValue }
		},
		methods: {
			actionClick() {
				this.$refs.uUpload.upload();
			},
			
			onUploaded(data) {
				this.form.childrenImage = data.resourceUrl;
				this.currentValue = { ...this.form };
				this.show = false;
			},
			
			editClick() {
				this.show = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		width: 100%;
	}
	.edit{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		width: 88rpx;
		height: 88rpx;
		// background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
		background: #F5AC3C;
		border: 3rpx solid rgba(255,255,255,0.3);
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(164,164,164,0.2);
		border-radius: 50%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	.popup{
		padding: 30rpx;
	}
	
	.container{
		height: 100%;
		width: 100%;
		background-color: #AACD22;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_one_1.png');
		
		.yb1{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 40rpx;
			top: 280rpx;
			width: 441rpx;
			height: 387rpx;
			// background-color: antiquewhite;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_one_2.png');
		
			.name{
				font-size: 48rpx;
				color: #333333;
				font-weight: 800;
			}
			.age{
				font-size: 36rpx;
				color: #333333;
				font-weight: 800;
			}
			.desc{
				font-size: 34rpx;
				color: #333333;
				font-weight: 500;
			}
		}
		.yb2{
			position: absolute;
			left: 30rpx;
			top: 48rpx;
		}
		
		.yb3{
			position: absolute;
			left: -50rpx;
			top: 0rpx;
		}
		
		.yb4{
			position: absolute;
			bottom: 52rpx;
			left: 48rpx;
			width: 647rpx;
			height: 531rpx;
			background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_one_41.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.upload-hint{
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>